<template>
	<div class="div">
		<div class="main">
			<h2>金融服务可视化系统</h2>
			<div class="form">
				<div class="top">
					<span>用户登录</span>
					<span>登录说明</span>
				</div>
				<div class="content">
					<el-form
						ref="ruleFormRef"
						:model="ruleForm"
						status-icon
						:rules="rules"
						class="demo-ruleForm"
					>
						<el-form-item prop="username">
							<el-input
								v-model="ruleForm.username"
								type="text"
								autocomplete="off"
								placeholder="请输入账号"
							/>
						</el-form-item>
						<el-form-item prop="password">
							<el-input
								v-model="ruleForm.password"
								type="password"
								autocomplete="off"
								placeholder="请输入登录密码"
							/>
						</el-form-item>
						<div class="pwdInfo">
							<el-checkbox v-model="remPwd" label="记住密码" size="large" />
							<span>忘记密码?</span>
						</div>
						<el-form-item>
							<el-button
								type="primary"
								@click="submitForm(ruleFormRef)"
								color="#0073ff"
								>登录</el-button
							>
						</el-form-item>
					</el-form>
					<span class="reg" @click="handleReg">没有账号? 立即注册</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import router from "../router";
import { userLogin } from "../api/user";
import { ElMessage } from "element-plus";
import { useTabsStore } from "../store/tabs";
import { useInfoStore } from "../store/userInfo";
import { roleInfoGet } from "../api/role";
const store = useTabsStore();
const useStore = useInfoStore();

//忘记密码
let remPwd = ref("");

const ruleFormRef = ref<FormInstance>();

const username = (rule: any, value: any, callback: any) => {
	if (value === "") {
		callback(new Error("请输入用户名!"));
	} else {
		callback();
	}
};

const password = (rule: any, value: any, callback: any) => {
	if (value === "") {
		callback(new Error("请输入登录密码!"));
	} else {
		callback();
	}
};

const ruleForm = reactive({
	username: "",
	password: "",
});

const rules = reactive<FormRules>({
	username: [{ validator: username, trigger: "blur" }],
	password: [{ validator: password, trigger: "blur" }],
});

//提交按钮
const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid) => {
		if (valid) {
			console.log("submit!");
			userLogin(ruleForm).then((res) => {
				ElMessage({
					message: `登录成功,即将跳转首页`,
					type: "success",
				});
				store.tabsList = [
					{
						title: "首页",
						path: "/index",
					},
				];
				store.tabsIndex = "/index";
				useStore.userInfo = res.data;
				roleInfoGet(res.data.roleId).then((res) => {
					useStore.userInfo!.roleInfo = res.data.results[0];
				});
				setTimeout(() => {
					router.push("/");
				}, 1500);
			});
		} else {
			console.log("error submit!");
			return false;
		}
	});
};
//重置按钮
const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
};

//跳转注册页面
const handleReg = () => {
	router.push("/reg");
};
</script>

<style scoped lang="scss">
:deep(.el-input__wrapper) {
	background-color: transparent;
	box-shadow: 0 0 0 1px #0073ff;
	.el-input__inner {
		color: #9cb0c9;
	}
}
.pwdInfo {
	height: 30px;
	margin-bottom: 24px;
	display: flex;
	justify-content: space-between;
	:deep(.el-checkbox__label) {
		color: #0073ff;
	}
	:deep(.el-checkbox) {
		align-items: start;
	}
	:deep(.el-checkbox__inner) {
		background-color: #014399;
		border: 1px solid #0073ff;
	}
	span {
		color: #0073ff;
		font-size: 14px;
		vertical-align: top;
		cursor: pointer;
	}
}
.reg {
	font-size: 14px;
	color: #0073ff;
	cursor: pointer;
	position: relative;
	top: -10px;
}
.div {
	background: url(../assets/bgd.png) no-repeat 0 0 / cover;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	font-size: 16px;
	h2 {
		letter-spacing: 10px;
		margin: 14px 0;
		color: #fff;
	}
	.form {
		width: 380px;
		height: 380px;
		background: url(../assets/bgd1.png) no-repeat 0 0 / cover;
		display: flex;
		align-items: center;
		padding: 60px 40px;
		box-sizing: border-box;
		flex-direction: column;
		.top {
			width: 100%;
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			letter-spacing: 4px;
			cursor: pointer;
		}
		.content {
			width: 100%;
			margin-top: 30px;
			.el-form-item {
				margin-bottom: 24px;
				:deep(.el-input__inner) {
					height: 35px;
				}
				.el-button {
					width: 100%;
					height: 40px;
				}
			}
		}
	}
}
</style>
